<template>
  <div>
    <el-calendar style="height: 500px" v-model="value">
      <!-- 使用 Vue 2.6 slot 语法 -->
      <template v-slot:dateCell="{ data }">
        <div
          @click="isSelected(data, dealMyDate(data.day))"
          style="width: 100%; height: 100%"
          :class="dealMyDate(data.day) ? 'isSelectedclass' : ''"
        >
          <span :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-").slice(1).join("-") }}
            {{ data.isSelected ? "✔️" : "" }}
          </span>
          <!-- 显示日 -->
          <br />
          <span class="is-selected">{{ dealMyDate(data.day) }}</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: "Calendar",
  data () {
    return {
      value: new Date(),
      resDate: [
        { date: "2024-11-18", content: "写博客", },
        { date: "2024-11-26", content: "学习VUE" }
      ]
    };
  },
  created () {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", e => {
        this.prevBtnmonth(this.value);
      });

      // 点击下一个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        this.nextBtnmonth(this.value);
      });

      // 点击今天
      let todayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayBtn.addEventListener("click", () => {
        this.todayBtnmonth(this.value);
      });
    });
  },
  methods: {
    prevBtnmonth (ins) {
      // console.log("上个月按钮事件");
      // console.log(ins);
    },
    nextBtnmonth (ins) {
      // console.log("下个月按钮事件");
      // console.log(ins);
    },
    todayBtnmonth (ins) {
      // console.log("今天按钮事件");
      // console.log(ins);
    },
    // 是否选中日期
    isSelected (ins, ins2) {
      // console.log(ins.day);
      // console.log(ins2);
    },

    dealMyDate (v) {
      let len = this.resDate.length;
      let res = "";
      for (let i = 0; i < len; i++) {
        if (this.resDate[i].date == v) {
          res = this.resDate[i].content;
          break;
        }
      }
      return res;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.isSelectedclass {
  background: #1abc9c;
}
.isSelectedclass .is-selected {
  color: #fff !important;
}
/deep/ .el-calendar-table .el-calendar-day {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2px !important;
  height: 60px !important;
  text-align: center;
}
</style>

